<template>
  <div>
    <h3>赞</h3>
    <div class="card" v-for="item in moments">
      <Momment :moment="item"></Momment>
      <MommentOption :id="item.id" :item="item"
                     @Collection=""
                     @Repost=""
                     @Comment=""
                     @Like="Like"
      ></MommentOption>
    </div>
  </div>
</template>
<script>
  import Momment from '@/components/post/moment'
  import MommentOption from '@/components/post/moment-option'
  import { voteRead } from '@/public/api'
  import Bus from '../../bus/bus'

  export default {
    components: {Momment, MommentOption},
    data () {
      return {
        moments: [],
        currentPage: '',
        size: 7,
        hasMore: false
      }
    },
    methods: {
      getContent (isLoadMore = false, page = 1) {
        voteRead({
          user_id: this.User_id,
          page: page,
          size: this.size
        }).then(
          data => {
            if (data.status) {
              if (isLoadMore || page === 1) this.moments = []
              var arr = data.data
              for (let i = 0; i < arr.length; i++) {
                this.moments.push({
                  id: arr[i].post.id,
                  content: arr[i].post.content,
                  update_time: arr[i].post.created_at,
                  user_id: arr[i].post.user_id,
                  Images: arr[i].post.images,
                  name: arr[i].post.userbasic.name,
                  avatar: arr[i].post.userbasic.avatar,
                  vote: arr[i].post.vote.some((item, index, array) => {
                    return item.user_id + '' === this.User_id
                  }),
                  collect: arr[i].post.collect.some((item, index, array) => {
                    return item.user_id + '' === this.User_id
                  }),
                  collect_size: arr[i].post.collect.length,
                  vote_size: arr[i].post.vote.length
                })
              }
              this.currentPage = data.page
              this.hasMore = data.hasMore
              console.log(this.moments)
            }
          }).catch(message => {
          }
        )
      },
      Like (id) {
        console.log(`父组件处理${id}`)
        this.moments = this.moments.filter(function (value, index, array) {
          return (value.id !== id)
        })
      },
      lodeMore () {
        if (!this.hasMore) {
          console.log('没有啦')
          return
        } else {
          this.currentPage++
          this.getContent(false, this.currentPage)
        }
      }
    },
    created () {
      this.getContent()
    },
    mounted () {
      Bus.$on('loadMore', () => {
        console.log('点赞页加载更多')
        this.lodeMore()
      })
    },
    beforeDestroy () {
      Bus.$off('loadMore')
    },
    watch: {
      User_id (curVal, oldVal) {
        this.getContent()
      }
    },
    computed: {
      User_id () {
        return this.$store.state.user_id
      }
    }
  }
</script>
<style scoped>
  .card {
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 600px;
    background: #fff;
    text-align: left;
    border-radius: 5px;
    overflow: hidden;
  }

  h3 {
    text-align: center;
  }
</style>
